<template>
  <view class="container">
    <block v-if="isload">
      <view
        class="ordertop"
        :style="'background:' + t('color2') + ';background-size:100%'"
      >
        <view class="f1" v-if="detail.refund_status == 0">
          <view class="t1">已取消</view>
        </view>
        <view class="f1" v-if="detail.refund_status == 1">
          <view class="t1">审核中</view>
        </view>
        <view class="f1" v-if="detail.refund_status == 2">
          <view class="t1">审核通过，已退款</view>
        </view>
        <view class="f1" v-if="detail.refund_status == 3">
          <view class="t1">驳回</view>
        </view>
        <view class="f1" v-if="detail.refund_status == 4">
          <view class="t1">审核通过，退货中</view>
          <view class="t2" v-if="!showlog">请提交退货物流单号</view>
        </view>
        <view class="f1" v-if="detail.refund_status == 5">
          <view class="t1">审核通过，待退款</view>
        </view>
        <block v-if="detail.refund_status == 4 || detail.refund_status == 5">
          <view class="show-tips" v-if="showlog">
            <view class="title-top"> 退货物流 </view>
            <block v-if="1 || data_list.type == 2">
              <scroll-view scroll-x>
                <view class="tab-header">
                  <view
                    v-for="(tab, index) in datalist"
                    :key="index"
                    class="tab-item"
                    :class="{ active: currentTab == index }"
                    @tap="switchTab(index)"
                  >
                    {{
                      tab.express_no.includes(":")
                        ? tab.express_no.split(":")[0]
                        : tab.express_no
                    }}
                  </view>
                </view>
                <view class="" v-if="currentTab >= 0">
                  <view class="tips-box-left">
                    <view
                      @click="tolog"
                      v-if="
                        datalist[currentTab].logistics &&
                        datalist[currentTab].logistics[0]
                      "
                    >
                      <view class="tips-text">
                        {{ datalist[currentTab].logistics[0].AcceptStation }}
                      </view>
                      <view class="tips-time">
                        {{ datalist[currentTab].logistics[0].AcceptTime }}
                      </view>
                    </view>
                    <view v-else> 暂无物流信息 </view>
                  </view>
                </view>
              </scroll-view>
            </block>
            <block v-else>
              <view
                class="tips-box"
                @tap="logistics"
                :data-express_type="detail.express_type"
                :data-express_com="detail.express_com"
                :data-express_no="detail.express_no"
                :data-express_content="detail.express_content"
              >
                <view class="tips-box-left">
                  <view class="tips-text">
                    {{ datalist[0].context }}
                  </view>
                  <view class="tips-time">
                    {{ datalist[0].time }}
                  </view>
                </view>
                <view class="tips-box-right">
                  <image
                    class="arrow-right"
                    src="/static/img/arrowright.png"
                    mode=""
                  ></image>
                </view>
              </view>
            </block>
          </view>
          <!-- <view class="tips-wl" v-if="!showlog"> 物流信息加载中... </view> -->
        </block>
      </view>
      <view
        class="btitle flex-y-center"
        v-if="detail.bid > 0"
        @tap="goto"
        :data-url="'/pagesExt/business/index?id=' + detail.bid"
      >
        <image
          :src="detail.binfo.logo"
          style="width: 36rpx; height: 36rpx"
        ></image>
        <view
          class="flex1"
          decode="true"
          space="true"
          style="padding-left: 16rpx"
          >{{ detail.binfo.name }}</view
        >
      </view>
      <view class="product">
        <view v-for="(item, idx) in prolist" :key="idx" class="content">
          <!-- <view @tap="goto" :data-url="'/pages/shop/product?id=' + item.proid">
						<image :src="item.pic"></image>
					</view> -->
          <view @tap="gotoproid(item, detail.order_type)">
            <image :src="item.pic"></image>
          </view>
          <view class="detail">
            <text class="t1">{{ item.name }}</text>
            <text class="t2">{{ item.ggname }}</text>
            <view class="t3"
              ><text class="x1 flex1">￥{{ item.sell_price }}</text
              ><text class="x2">×{{ item.refund_num }}</text></view
            >
          </view>
        </view>
      </view>

      <view class="orderinfo">
        <view class="item">
          <text class="t1">退货单编号</text>
          <text class="t2" user-select="true" selectable="true">{{
            detail.refund_ordernum
          }}</text>
        </view>
        <view class="item">
          <text class="t1">订单编号</text>
          <text
            class="t2"
            user-select="true"
            selectable="true"
            @tap="goto"
            :data-url="'detail?id=' + detail.orderid"
            >{{ detail.ordernum }}</text
          >
        </view>
        <view class="item">
          <text class="t1">申请时间</text>
          <text class="t2">{{ detail.createtime }}</text>
        </view>
      </view>
      <view class="orderinfo">
        <view class="item">
          <text class="t1">类型</text>
          <text class="t2 red">{{ detail.refund_type_label }}</text>
        </view>
        <view class="item">
          <text class="t1">申请退款金额</text>
          <text class="t2 red">¥{{ detail.refund_money }}</text>
        </view>

        <view class="item">
          <text class="t1">退款状态</text>
          <text class="t2 grey" v-if="detail.refund_status == 0">已取消</text>
          <text class="t2 red" v-if="detail.refund_status == 1">审核中</text>
          <text class="t2 red" v-if="detail.refund_status == 2">已退款</text>
          <text class="t2 red" v-if="detail.refund_status == 3">已驳回</text>
          <text class="t2 red" v-if="detail.refund_status == 4">
            审核通过，退货中
          </text>
          <text class="t2 red" v-if="detail.refund_status == 5"
            >审核通过，待退款</text
          >
        </view>
        <view class="item">
          <text class="t1">退款原因</text>
          <text class="t2">{{ detail.refund_reason }}</text>
        </view>
        <view class="item" v-if="detail.refund_checkremark">
          <text class="t1">审核备注</text>
          <text class="t2">{{ detail.refund_checkremark }}</text>
        </view>
        <view class="item" v-if="detail.refund_pics">
          <text class="t1">图片</text>
          <view
            id="content_picpreview"
            class="flex"
            style="flex-wrap: wrap; padding-top: 20rpx"
          >
            <view
              v-for="(item, index) in detail.refund_pics"
              :key="index"
              class="layui-imgbox"
            >
              <view class="layui-imgbox-img">
                <image
                  :src="item"
                  @tap="previewImage"
                  :data-url="item"
                  mode="widthFix"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="orderinfo" v-if="detail.refund_status == 4">
        <view class="item">
          <text class="t1">退货地址</text>
          <text class="t2">{{
            return_adress.return_province +
            return_adress.return_city +
            return_adress.return_area +
            return_adress.return_address
          }}</text>
        </view>
      </view>

      <view class="orderinfo" v-if="detail.freight_type == 11">
        <view class="item">
          <text class="t1">发货地址</text>
          <text class="t2"
            >¥{{ detail.freight_content.send_address }} -
            {{ detail.freight_content.send_tel }}</text
          >
        </view>
        <view class="item">
          <text class="t1">收货地址</text>
          <text class="t2"
            >¥{{ detail.freight_content.receive_address }} -
            {{ detail.freight_content.receive_tel }}</text
          >
        </view>
      </view>

      <view style="width: 100%; height: 120rpx"></view>

      <view class="bottom">
        <!-- &&(order_info.status == 2 || order_info.status == 3) -->
        <block v-if="detail.refund_status == 4">
          <view class="btn2" @tap="toRefundNumber(detail.id)"
            >填写物流单号</view
          >
        </block>
        <block v-if="detail.refund_status == 1 || detail.refund_status == 4">
          <view class="btn2" @tap="toclose" :data-id="detail.id">取消</view>
        </block>
      </view>
    </block>
    <uni-popup id="dialogSelectExpress" ref="dialogSelectExpress" type="dialog">
      <view
        style="
          background: #fff;
          padding: 20rpx 30rpx;
          border-radius: 10rpx;
          width: 600rpx;
        "
        v-if="express_content"
      >
        <view
          class="sendexpress"
          v-for="(item, index) in express_content"
          :key="index"
          style="border-bottom: 1px solid #f5f5f5; padding: 20rpx 0"
        >
          <!-- <view class="sendexpress-item" @tap="logistics" :data-express_type="detail.express_type"
						:data-express_com="detail.express_com" :data-express_no="detail.express_no"
						:data-express_content="detail.express_content"
							style="display: flex;"> -->
          <view
            class="sendexpress-item"
            @tap="goto"
            :data-url="
              '/pagesExt/order/logistics?express_com=' +
              item.express_com +
              '&express_no=' +
              item.express_no +
              '&id=' +
              detail.id
            "
            style="display: flex"
          >
            <view class="flex1" style="color: #121212"
              >{{ item.express_com }} - {{ item.express_no }}
            </view>
            <image
              src="/static/img/arrowright.png"
              style="width: 30rpx; height: 30rpx"
            />
          </view>
          <view v-if="item.express_oglist" style="margin-top: 20rpx">
            <view
              class="oginfo-item"
              v-for="(item2, index2) in item.express_oglist"
              :key="index2"
              style="display: flex; align-items: center; margin-bottom: 10rpx"
            >
              <image
                :src="item2.pic"
                style="
                  width: 50rpx;
                  height: 50rpx;
                  margin-right: 10rpx;
                  flex-shrink: 0;
                "
              />
              <view class="flex1" style="color: #555"
                >{{ item2.name }}({{ item2.ggname }})</view
              >
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <loading v-if="loading"></loading>
    <dp-tabbar :opt="opt"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,

      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      prodata: "",
      detail: "",
      prolist: "",
      express_content: "",
      datalist: [],
      showlog: false,
      currentTab: 0,
      data_list: {},
      order_info: {},
      return_adress: "",
    };
  },

  onLoad: function (opt) {
    this.opt = app.getopts(opt);
    this.getdata();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },
  methods: {
    getdata: function () {
      var that = this;
      that.loading = true;
      app.get("Order/refundDetail", { id: that.opt.id }, function (res) {
        if (res.show_return_component == true) {
          app.goto("/pagesZ/order/refundDetail?id=" + that.opt.id, "redirect");
          //到退货组件详情
          return;
        }
        that.loading = false;
        that.detail = res.detail;
        that.prolist = res.prolist;
        that.return_adress = res.return;
        that.order_info = res.order_info;
        that.getLogistics();
        that.loaded();
      });
    },

    switchTab(index) {
      this.currentTab = index;
    },

    getLogistics() {
      var that = this;
      // if (!that.detail.express_no && !that.detail.express_content) {
      //   that.showlog = false;
      //   return;
      // }
      that.loading = true;
      app.get(
        "Order/refundLogistics",
        {
          //   express_com: that.detail.express_com,
          //   express_no: that.detail.express_no,
          //   type: that.detail.type,
          id: that.detail.id,
        },
        function (res) {
          that.showlog = true;
          that.loading = false;
          that.data_list = [];
          that.datalist = [];
          that.data_list = res.data;
          if (res.data.type == 1) {
            if (res.data.datalist.State == -1) {
              that.showlog = false;
            }
            that.datalist = [
              {
                express_com: res.data.datalist.Name,
                express_no: res.data.datalist.LogisticCode,
                express_ogids: "",
                logistics: res.data.datalist.Traces,
              },
            ];
          }
          if (res.data.type == 2) {
            that.datalist = res.data.datalist;
          }
          that.loaded();
        }
      );
    },

    logistics: function (e) {
      var express_com = e.currentTarget.dataset.express_com;
      var express_no = e.currentTarget.dataset.express_no;
      var express_content = e.currentTarget.dataset.express_content;
      var express_type = e.currentTarget.dataset.express_type;
      var prolist = this.prolist;
      var id = this.opt.id;
      console.log(express_content);
      if (!express_content) {
        app.goto(
          "/pagesExt/order/logistics?express_com=" +
            express_com +
            "&express_no=" +
            express_no +
            "&type=" +
            express_type +
            "&id=" +
            id
        );
      } else {
        express_content = JSON.parse(express_content);
        for (var i in express_content) {
          if (express_content[i].express_ogids) {
            var express_ogids = express_content[i].express_ogids.split(",");
            console.log(express_ogids);
            var express_oglist = [];
            for (var j in prolist) {
              if (app.inArray(prolist[j].id + "", express_ogids)) {
                express_oglist.push(prolist[j]);
              }
            }
            express_content[i].express_oglist = express_oglist;
          }
        }
        this.express_content = express_content;
        this.$refs.dialogSelectExpress.open();
      }
    },

    hideSelectExpressDialog: function () {
      this.$refs.dialogSelectExpress.close();
    },

    tolog() {
      app.goto(
        "/pagesExt/order/refundlogistics?express_com=" +
          this.datalist[this.currentTab].express_com +
          "&express_no=" +
          this.datalist[this.currentTab].express_no.split(":")[0] +
          "&id=" +
          this.detail.id
      );
    },

    toclose: function (e) {
      var that = this;
      var id = e.currentTarget.dataset.id;
      app.confirm("确定要关闭该退款单吗?", function () {
        app.showLoading("提交中");
        app.post("Order/refundOrderClose", { id: id }, function (data) {
          app.showLoading(false);
          app.success(data.msg);
          setTimeout(function () {
            that.getdata();
          }, 1000);
        });
      });
    },
    orderCollect: function (e) {
      var that = this;
      var orderid = e.currentTarget.dataset.id;
      app.confirm("确定要收货吗?", function () {
        app.showLoading("收货中");
        app.post("Order/orderCollect", { orderid: orderid }, function (data) {
          app.showLoading(false);
          app.success(data.msg);
          setTimeout(function () {
            that.getdata();
          }, 1000);
        });
      });
    },
    openLocation: function (e) {
      var latitude = parseFloat(e.currentTarget.dataset.latitude);
      var longitude = parseFloat(e.currentTarget.dataset.longitude);
      var address = e.currentTarget.dataset.address;
      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        name: address,
        scale: 13,
      });
    },
    gotoproid(i, type) {
      if (type == "" || type == "shop") {
        app.goto("/pages/shop/product?id=" + i.proid + "&ptype=" + type);
      } else if (type == "seckill") {
        app.goto("/pages/shop/product?id=" + i.procode + "&ptype=" + type);
      } else if (type == "groupby") {
        app.goto("/pages/shop/product?id=" + i.procode + "&ptype=" + type);
      }
    },
    toRefundNumber(id) {
      app.goto("/pagesExt/order/refundNumber?id=" + id);
    },
  },
};
</script>
<style>
.ordertop {
  width: 100%;
  /* height: 220rpx; */
  padding: 40rpx;
}

.ordertop .f1 {
  color: #fff;
}

.ordertop .f1 .t1 {
  font-size: 32rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.ordertop .f1 .t2 {
  font-size: 24rpx;
}

.address {
  display: flex;
  width: 100%;
  padding: 20rpx 3%;
  background: #fff;
}

.address .img {
  width: 40rpx;
}

.address image {
  width: 40rpx;
  height: 40rpx;
}

.address .info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.address .info .t1 {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.address .info .t2 {
  font-size: 24rpx;
  color: #999;
}

.product {
  width: 96%;
  margin: 0 2%;
  border-radius: 8rpx;
  margin-top: 16rpx;
  padding: 14rpx 3%;
  background: #fff;
}

.product .content {
  display: flex;
  position: relative;
  width: 100%;
  padding: 16rpx 0px;
  border-bottom: 1px #e5e5e5 dashed;
}

.product .content:last-child {
  border-bottom: 0;
}

.product .content image {
  width: 140rpx;
  height: 140rpx;
}

.product .content .detail {
  display: flex;
  flex-direction: column;
  margin-left: 14rpx;
  flex: 1;
}

.product .content .detail .t1 {
  font-size: 26rpx;
  line-height: 36rpx;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product .content .detail .t2 {
  height: 46rpx;
  line-height: 46rpx;
  color: #999;
  overflow: hidden;
  font-size: 26rpx;
}

.product .content .detail .t3 {
  display: flex;
  height: 40rpx;
  line-height: 40rpx;
  color: #ff4246;
}

.product .content .detail .x1 {
  flex: 1;
}

.product .content .detail .x2 {
  width: 100rpx;
  font-size: 32rpx;
  text-align: right;
  margin-right: 8rpx;
}

.product .content .comment {
  position: absolute;
  top: 64rpx;
  right: 10rpx;
  border: 1px #ffc702 solid;
  border-radius: 10rpx;
  background: #fff;
  color: #ffc702;
  padding: 0 10rpx;
  height: 46rpx;
  line-height: 46rpx;
}

.product .content .comment2 {
  position: absolute;
  top: 64rpx;
  right: 10rpx;
  border: 1px #ffc7c2 solid;
  border-radius: 10rpx;
  background: #fff;
  color: #ffc7c2;
  padding: 0 10rpx;
  height: 46rpx;
  line-height: 46rpx;
}

.orderinfo {
  width: 96%;
  margin: 0 2%;
  border-radius: 8rpx;
  margin-top: 16rpx;
  padding: 14rpx 3%;
  background: #fff;
}

.orderinfo .item {
  display: flex;
  width: 100%;
  padding: 20rpx 0;
  border-bottom: 1px dashed #ededed;
  overflow: hidden;
}

.orderinfo .item:last-child {
  border-bottom: 0;
}

.orderinfo .item .t1 {
  width: 200rpx;
  flex-shrink: 0;
}

.orderinfo .item .t2 {
  flex: 1;
  text-align: right;
}

.orderinfo .item .red {
  color: red;
}

.orderinfo .item .grey {
  color: grey;
}

.bottom {
  width: 100%;
  padding: 16rpx 20rpx;
  background: #fff;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: #eee 1px solid;
}

.btn1 {
  margin-left: 20rpx;
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  color: #fff;
  border-radius: 3px;
  text-align: center;
}

.btn2 {
  margin-left: 20rpx;
  min-width: 160rpx;
  padding: 0 10rpx;
  height: 60rpx;
  line-height: 60rpx;
  color: #333;
  background: #fff;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  text-align: center;
}

.btn3 {
  position: absolute;
  top: 60rpx;
  right: 10rpx;
  font-size: 24rpx;
  width: 120rpx;
  height: 50rpx;
  line-height: 50rpx;
  color: #333;
  background: #fff;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  text-align: center;
}

.btn4 {
  border: none;
}

.btitle {
  width: 100%;
  height: 100rpx;
  background: #fff;
  padding: 0 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.btitle .comment {
  border: 1px #ffc702 solid;
  border-radius: 10rpx;
  background: #fff;
  color: #ffc702;
  padding: 0 10rpx;
  height: 46rpx;
  line-height: 46rpx;
}

.btitle .comment2 {
  border: 1px #ffc7c0 solid;
  border-radius: 10rpx;
  background: #fff;
  color: #ffc7c0;
  padding: 0 10rpx;
  height: 46rpx;
  line-height: 46rpx;
}

.layui-imgbox {
  margin-right: 16rpx;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  position: relative;
}

.layui-imgbox-close {
  position: absolute;
  display: block;
  width: 32rpx;
  height: 32rpx;
  right: -16rpx;
  top: -16rpx;
  color: #999;
  font-size: 32rpx;
  background: #fff;
}

.layui-imgbox-close image {
  width: 100%;
  height: 100%;
}

.layui-imgbox-img {
  display: block;
  width: 200rpx;
  height: 200rpx;
  padding: 2px;
  border: #d3d3d3 1px solid;
  background-color: #f6f6f6;
  overflow: hidden;
}

.layui-imgbox-img > image {
  max-width: 100%;
}

.title-top {
  padding: 20rpx 20rpx 0rpx 20rpx;
  font-weight: 700;
}

.tips-box {
  display: flex;
  align-items: center;
  /* background-color: #f4f4f4; */
  justify-content: space-between;
  padding: 20rpx;
}

.tips-box-left {
  /* color: #888; */
  font-size: 26rpx;
}

.tips-text {
  font-weight: 700;
  color: #fff;
  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;
}

.tips-time {
  margin-top: 20rpx;
  color: #fff;
}

.tips-box-right {
  margin-left: 20rpx;
}

.arrow-right {
  width: 30rpx;
  height: 30rpx;
}

.tips-wl {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tab-header {
  display: flex;
  padding: 20rpx 0;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #000;
  position: relative;
  padding: 0 10rpx;
  text-align: left;
}

.tab-item.active {
  color: #fff;
  font-weight: bold;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  /* background: #ff6b81; */
}
</style>
